<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="20">
        <template v-if="type == 1">
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="活动名称">
              <a-input allowClear v-model="queryParam.name" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="归属微商城">
              <a-select v-model="queryParam.appId" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.appid" v-for="(item, index) in brandList" :key="index"> {{ item.name }}微商城 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 2">
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="用户手机号">
              <a-input allowClear v-model="queryParam.mobile" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="品牌卡号">
              <a-input allowClear v-model="queryParam.cardNo" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 3">
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="店仓编号">
              <a-input allowClear v-model="queryParam.storeCode" placeholder="输入店仓编号查询" />
            </a-form-item>
          </a-col>
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="店仓名称">
              <a-input allowClear v-model="queryParam.storeName" placeholder="输入店仓名查询" />
            </a-form-item>
          </a-col>
        </template>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button type="primary" v-if="type == 1" style="margin-left: 8px" @click="handleAdd">新增</a-button>
            <template v-if="type == 2">
              <a-button  style="margin-left: 8px" type="primary" icon="cloud-download" @click="handleExport">导出中奖名单</a-button>
              <a-upload
                accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                name="file"
                :showUploadList="false"
                :multiple="false"
                :data="uploadData"
                :action="uploadUrl"
                @change="handleChange"
              >
                <a-button style="margin-left: 8px" type="primary" icon="cloud-download">导入发货物流</a-button>
              </a-upload>
            </template>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { importLogistics } from '@/api/marketingCenter/luckyDraw.js'
export default {
  props: {
    type: {
      type: [Number, String],
      default: 1 // 1抽奖活动列表 2中奖记录3运维
    },
    brandList: {
      type: Array,
      default: function () {
        return []
      },
      required: false
    }
  },
  data() {
    return {
      uploadData: {
      },
      uploadUrl: importLogistics,
      queryParam: {
        appId: '',
        department: '',
        remarks: '',
        nos: ''
      }
    }
  },
  computed: {},
  created() {
  },
  mounted() {},
  methods: {
    handleExport() {
      this.$emit('onExport')
    },

    // 新增
    handleAdd() {
      this.$emit('onAdd', 'null')
    },

    // 导入发货物流
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        const {msg, message, code, data} = info.file.response
        if (code == 200 ) {
          this.$emit('onImportLogistics')
        } else {
          this.$message.error(msg || message)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    // 发券
    handleIssue() {
      this.$emit('handleIssue')
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        appId: '',
        department: '',
        remarks: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
